<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.nav {
				width: 960px;
				height: 40px;
				border: 1px solid black;
				/*上下100px 左右自动居中*/
				margin: 100px auto;
			}
			.nav ul{
				/*去掉ul中的小圆点*/
				list-style-type: none;
			}
			.nav ul li{
				width: 120px;
				height: 40px;
				float: left;
				/*让文字水平居中*/
				text-align: center;
				/*让文字垂直居中，line-height是行高,line-height=height就会垂直居中*/
				line-height: 40px;
			}
			.nav ul li a{
				/*转换为块级元素可以设置宽高*/
				display: block;
				width: 120px;
				height: 40px;
			}
			.nav ul li a:link{
				color: white;
				background-color: yellowgreen;
				/*去下划线*/
				text-decoration: none;
			}
			.nav ul li a:hover{
				/*悬停字体颜色*/
				color: rgb(254,254,0);
				/*悬停背景颜色*/
				background-color: rgb(128,0,128) ;
				/*悬停字体加粗*/
				font-weight: bold;
			}
			.nav ul li a:visited{
				color: blue;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>
					<a href="http://www.baidu.com" >网站栏目</a>
				</li>
				<li>
					<a href="http://www.baidu.com">网站栏目</a>
				</li>
				<li>
					<a href="http://www.baidu.com">网站栏目</a>
				</li>
				<li>
					<a href="http://www.baidu.com">网站栏目</a>
				</li>
				<li>
					<a href="http://www.baidu.com">网站栏目</a>
				</li>
				<li>
					<a href="http://www.baidu.com">网站栏目</a>
				</li>
				<li>
					<a href="http://www.baidu.com">网站栏目</a>
				</li>
				<li>
					<a href="http://www.baidu.com">网站栏目</a>
				</li>
			</ul>
		</div>
		<ul></ul>
	</body>
</html>
